<template>
	<div id="cunjiu">
		<!-- <div class="navAndBanner">
			<nav>
				<ul>
					<li><img src="../assets/img/logo_03.png"></li>
					<li ><a style="color:white" @click="toCun">客人存酒仓管理</a></li>
					<li><a style="color:white" @click="toChong">充公酒管理</a></li>
					<li><a href="">视图</a></li>
					<li><a href="">报表</a></li>
					<li><a href="" style="color:white">退出</a></li>
				</ul>
			</nav>
			
		</div>	 -->
		<navAndBanner></navAndBanner>	
		<div class="funcs" style="margin-bottom: 5vh;margin-top: 80px">
			<div class="func fun1" @click="toCustomerGet"></div>
			<div class="func fun2" @click='toSmsSearch'></div>
			<div class="func fun3" @click='confirmSms'></div>
			
		</div>
		<div class="funcs" style="margin-bottom:80px">
			<div class="func fun4" @click='toSaveList'></div>
			<div class="func fun5" @click="toFinancialAudit"></div>
			<div class="func fun6" @click="toShoppingList"></div>
			
		</div>
		<div class="footer">
			<p>kqmts   &copy 2015-2017 All Rights Reserved</p>
			<p>川ICP备16020686号</p>
		</div>
		<!-- 	选择取酒数量 -->
		<div class="center" v-if="isTrue3">
			<p style="font-size:18px;color: #989696;margin-top: 30px">选择取酒数量</p>
			<div style="border-top: 3px solid #999999;margin-top: 20px
			"></div>
			<div style="width:31.2vw;height:340px;margin:0 auto;margin-top: 30px">
				<Table border :columns="columns4" :data="customerInfo.CJDMX" @on-select="getWine" @on-select-all="getWine"></Table>
			</div>
			<div><button class="btn" style="background-color: #ffcc00;color: white" @click="get">确&nbsp&nbsp&nbsp&nbsp认</button><button class="btn" style="background-color: #dcdcdc;margin-left: 5vw" @click="cancel">取&nbsp&nbsp&nbsp&nbsp消</button></div>

		</div>
		<!-- 验证 -->
		<div class="center" v-show="isTrue1">
			<p style="font-size:18px;color: #989696;margin-top: 30px;text-align: left;">
				<span style="margin-left:8.3vw;cursor:pointer" @click="QJFS = 2;typeconfirmD = true;typeconfirmK = false;isTrue = false;isTrueF = false" :class="{yellow:typeconfirmD}">短信验证码</span>
				<span style="margin-left:14.5vw;cursor:pointer" @click="QJFS = 1;typeconfirmD = false;typeconfirmK = true ;isTrue = false;isTrueF = false" :class="{yellow:typeconfirmK}">客人酒卡号</span></p>
				<div style="border-top: 3px solid #999999;margin-top: 20px"></div>
				<div style="width:39.2vw;height:290px;margin:0 auto;margin-top: 70px">
					<input type="text" name="" class="inputtext" v-model="code">
					<button class="btn2" @click="confirm">验证</button>
					<div style="font-size: 24px;color: #00c705;margin-top: 60px" v-show="isTrue">验证成功！！</div>
					<div style="font-size: 24px;color: red;margin-top: 60px" v-show="isTrueF">验证失败！！</div>
					<div style="font-size: 24px;color: #999999;margin-top: 30px">下一步选择取酒类型及数量</div>
				</div>
				<div><button class="btn" style="background-color: #ffcc00;color: white" @click="nexto">下一步</button><button class="btn" style="background-color: #dcdcdc;margin-left: 5vw" @click="cancel">取&nbsp&nbsp&nbsp&nbsp消</button></div>
			</div>
			<div class="center" v-show="isTrue2">
				<p style="font-size:18px;color: #989696;margin-top: 30px">个人信息确认</p>
				<div style="border-top: 3px solid #999999;margin-top: 20px
				"></div>
				<div style="width:31.2vw;height:340px;margin:0 auto;margin-top: 30px">
					<div class="info1">
						<p>姓名:{{customerInfo.KHMC}}</p>
						<p>联系方式:{{customerInfo.KHDH}}</p>
						<p>会员卡号:{{customerInfo.KHBM}}</p>
					</div>
					<div class="info1" style="margin-left: 4.2vw">
						<p>酒卡号:{{customerInfo.CJKH}}</p>
						<p>存酒日期:{{customerInfo.DJRQ}}</p>
						<p>销售经理:{{customerInfo.YW}}</p>
					</div>
				</div>
				<div><button class="btn" style="background-color: #ffcc00;color: white" @click="nextt">下一步</button><button class="btn" style="background-color: #dcdcdc;margin-left: 5vw" @click="cancel">取&nbsp&nbsp&nbsp&nbsp消</button></div>

			</div>
			<Modal title="对话框标题" v-model="fail" class-name="vertical-center-modal">
				<p style="text-align:center;font-size:24px">取酒失败</p>

			</Modal>
		</div>
	</template>
	<script>
		import navAndBanner from '../components/navAndBanner.vue'
		export default {

			mounted() {
				this.userinfo = JSON.parse(sessionStorage.userinfo).data
			},
			components:{
				navAndBanner
			},
			data() {
				return {
					columns4: [
					{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: '商品名称',
						key: 'SPMC'
					},
					{
						title: '库存数量',
						key: 'SL'
					},
					
					{
						title: '取酒数量',
						key: 'QJSL',
						width: 150,
						align: 'center',
						render: (h, params) => {

							var self = this
							var inputV = ""
							return h('div', [
								h('input', {
									props: {
										type: 'text',
										size: 'small',
									},
									domProps: {
										value: self.value[params.index]
									},
									style: {
										marginRight: '5px',
										width:"4.1vw"
									},
									on: {
										change: () => {
											console.log('1')
                                            this.xiugai(params.index)
                                        },
										input: function (event) {
											self.value[params.index] = event.target.value
											self.$emit('input', event.target.value)
										}
									}
								}),

								]);
						}
					}
					],
					QJFS:2,
					code:"",
					isTrue:false,
					isTrue1:false,
					isTrue2:false,
					isTrue3:false,
					isTrueF:false,
					typeconfirmD:true,
					typeconfirmK:false,
					customerInfo:{},
					getWineInfo:[],
					fail:false,
					value:[]
				}
			},
			methods:{
				xiugai:function(index){
					this.customerInfo.CJDMX[index].QJSL = this.value[index]
				},
				toCun:function(){
					this.$router.push("index")
				},
				toChong:function(){
					this.$router.push("chonggongFunc/confiscationIndex")
				},
				cancel:function(){
					this.isTrue1 = false
					this.isTrue2 = false
					this.isTrue3 = false
					this.isTrue = false
					this.isTrueF = false
					this.code = ""
				},
				get:function(){
					var infoString="",infoArray=[],info2={}
					for (var i = 0;i<this.getWineInfo.length;i++) {
						var info = {}
						info.CJDMXXH = this.getWineInfo[i].XH;
						info.XH = i;
						info.SPBM = this.getWineInfo[i].SPBM;
						info.SPMC = this.getWineInfo[i].SPMC;
						info.SL = this.getWineInfo[i].QJSL;
						info.BZ = this.getWineInfo[i].BZ
						infoArray.push(info)
						
					}
					console.log("info",infoArray)
					info2.SYSUSERBM = this.userinfo.YHBM
					info2.SYSUSERMC = this.userinfo.YHMC
					info2.QJFS = this.QJFS
					info2.CJKH = this.customerInfo.CJKH
					info2.YSDH = this.customerInfo.YSDH
					info2.KHBM = this.customerInfo.KHBM
					info2.KHMC = this.customerInfo.KHMC
					info2.KHDH = this.customerInfo.KHDH
					info2.XFDH = this.customerInfo.XFDH
					info2.YW = this.customerInfo.YW
					info2.BZ = this.customerInfo.BZ
					info2.QJMX = infoArray
					

					var _this = this
					infoString = JSON.stringify(info2)
					
					this.$http.post(`${this.URL}/api/ws/take_out`,{
						token:_this.userinfo.token,
						userid:_this.userinfo.YHBM,
						timestamp:new Date().getTime(),
						data:infoString
					})
					.then(function(res){
						if (res.data.error_code == 0) {
							_this.isTrue3 = false
							_this.code = ""
						}
						else{
							_this.fail = true
						}
					})
				},
				getWine:function(wine){
					console.log(wine)
					this.getWineInfo = wine;

				},
				//第一次下一步
				nexto:function(){
					console.log(this.customerInfo)
					if (this.isTrue == true) {
						this.isTrue2 = true;
						this.isTrue1 = false
						this.isTrue = false
					}
				},
				//第二次下一步
				nextt:function(){
					console.log(111)
					this.isTrue3 = true;
					this.isTrue2 = false
				},
				confirm:function(){
					console.log(this.QJFS)
					var _this = this
					if (this.QJFS ==1) {
						this.$http.post(`${this.URL}/api/ws/take_out_verify`,{
							token:_this.userinfo.token,
							userid:_this.userinfo.YHBM,
							timestamp:new Date().getTime(),
							QJFS:_this.QJFS,
							CJKH:_this.code,
							YZM:""					
						})
						.then(function(res){
							
							console.log(res)
							if (res.data.error_code == 0 ) {
								// _this.code = ""
								_this.isTrue = true
								_this.isTrueF = false
								for (var i = res.data.data.CJDMX.length - 1; i >= 0; i--) {
									res.data.data.CJDMX[i].QJSL = res.data.data.CJDMX[i].SL
								}
								_this.customerInfo = res.data.data
							}
							else{
								_this.isTrue = false
								_this.isTrueF = true
							}
						})
					}
					if (this.QJFS ==2) {
						this.$http.post(`${this.URL}/api/ws/take_out_verify`,{
							token:_this.userinfo.token,
							userid:_this.userinfo.YHBM,
							timestamp:new Date().getTime(),
							QJFS:_this.QJFS,
							CJKH:"",
							YZM:_this.code					
						})
						.then(function(res){
							console.log(res)
							
							if (res.data.error_code == 0 ) {
								_this.isTrue = true
								_this.isTrueF = false
								// _this.code = ""
								for (var i = res.data.data.CJDMX.length - 1; i >= 0; i--) {
									res.data.data.CJDMX[i].QJSL = res.data.data.CJDMX[i].SL
								}
								_this.customerInfo = res.data.data
							}
							else{
								_this.isTrue = false
								_this.isTrueF = true
							}
						})
					}
					
				},
				toCustomerGet:function(){
					this.$router.push('cunjiuFunc/customerGet')
				},
				toSmsSearch:function() {
				// body...
				this.$router.push('cunjiuFunc/smsSearch')
			},
			confirmSms:function(){
				this.isTrue1 = true
			},
			toSaveList:function(){
				this.$router.push('cunjiuFunc/saveList')
			},
			toFinancialAudit:function(){
				this.$router.push('cunjiuFunc/financialAudit')
			},
			toShoppingList:function(){
				this.$router.push('cunjiuFunc/drinkCardView')
			}

		}
	}

</script>
<style scoped>
	.yellow{
		color:#ffcc00;
	}
	.info1{
		float: left;
		text-align: left;
		font-size: 1vw;
		line-height: 80px
	}
	.btn2{
		width: 7.8vw;
		height: 60px;
		background-color: #ffcc00;
		color: white;
		border:none;
		border-radius: 10px;
		margin-left: 50px;
		font-size: 1.25vw;
		cursor: pointer;
		outline: none;
	}
	.inputtext{
		width: 20.8vw;
		height: 60px;
		border-radius: 10px;
		border:2px solid #dcdcdc;
		outline: none;
		font-size: 24px;
		padding-left: 2vw
	}
	.btn{
		width: 13vw;
		height: 3vw;
		border:none;
		outline: none;
		font-size: 24px;
		border-radius: 10px;
		cursor: pointer;
	}
	.center{
		width: 42vw;
		height: 600px;
		background: white;
		position: absolute;
		z-index: 999;
		top: 0;left:0;right: 0;bottom: 0;
		margin: auto;overflow: auto;
		text-align: center;
	}
	.footer{
		height: 125px;
		width: 100%;
		background:linear-gradient(30deg,#b490ca,#5ebbe7);
		text-align: center;
		vertical-align: middle;
		color: white;
		padding-top: 70px
	}
	.navAndBanner{
		background:linear-gradient(30deg,#b490ca,#5ebbe7);
		width: 100%;
		height: 120px;
		vertical-align: middle;
		padding-top: 30px
		
	}
	a{
		text-decoration: none;
	}
	nav ul li{
		display: inline-block;
		vertical-align: middle;
		margin-right: 5%
	}
	nav ul li a{
		font-size: 24px;
		color: #999999;
	}
	nav ul li:first-child{
		margin-left: 13%;
		margin-right: 15%;
	}
	nav ul li:last-child{
		margin-top: 12px;
		float: right
		
	}
	body{background-color: #1E1E1E}
	*{padding:0;margin: 0;list-style:none;font-family: "微软雅黑"}
	nav{
		
	}
	.funcs{
		width: 76%;
		
		margin:0 auto;
		display: flex;	
		flex-wrap: wrap
	}
	.func{
		cursor: pointer;
		margin-right: 73px;
		width: 440px;
		height: 27.7vh;
		flex: 1
	}
	.fun1{
		background: url(../assets/img/fun1.png) no-repeat;
		background-size: contain;
	}
	.fun2{
		background:url(../assets/img/fun2.png) no-repeat;
		background-size: contain;
	}
	.fun3{
		background: url(../assets/img/fun3.png) no-repeat;
		background-size: contain;
	}
	.fun4{
		background: url(../assets/img/fun4.png) no-repeat;
		background-size: contain;
	}
	.fun5{
		background: url(../assets/img/fun5.png) no-repeat;
		background-size: contain;
	}
	.fun6{
		background: url(../assets/img/fun6.png) no-repeat;
		background-size: contain;
	}
	.bottle{
		position: absolute;
		
		right: 48%;
		margin-top: 230px;
	}
</style>